<template>
  <div class="complaint-list" v-loading="loading" element-loading-text="加载中">
    <el-card class="custom-box-card">
      <div class="custom-header">
        <span class="title">投诉列表</span>
      </div>
      <div class="list-table-page">
        <div class="list-table">
          <el-table border :data="list" style="width: 100%" highlight-current-row>
            <el-table-column type="index" label="#"></el-table-column>
            <el-table-column label="姓名" width="130">
              <template slot-scope="{ row }">{{ row.name }}</template>
            </el-table-column>
            <el-table-column label="联系电话" width="130">
              <template slot-scope="{ row }">{{ row.telephone }}</template>
            </el-table-column>
            <el-table-column label="投诉内容">
              <template slot-scope="{ row }">{{ row.content }}</template>
            </el-table-column>
            <el-table-column label="投诉附件数">
              <template slot-scope="{ row }">{{ row.mediaFiles.length }}</template>
            </el-table-column>
            <el-table-column label="是否有附件">
              <template slot-scope="{ row }">{{ row.content }}</template>
            </el-table-column>
            <el-table-column label="投诉用户" width="80">
              <template slot-scope="{ row }">{{ row.username }}</template>
            </el-table-column>
            <el-table-column label="回复内容">
              <template slot-scope="{ row }">{{ row.reply }}</template>
            </el-table-column>
            <el-table-column label="用户打分">
              <template slot-scope="{ row }">{{ row.review === 0 ? '未评价' : row.review }}</template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="{ row }">
                <el-button-group>
                  <el-tooltip content="回复" placement="top">
                    <el-button   icon="el-icon-edit-outline"
                      @click="$goto({ path: '/admin/complaintupdt', query: { id: row.id } })"   type="success"
                        size="mini"
                        style="background-color: rgb(147 152 154); border-color: rgb(147 152 154);"></el-button>
                  </el-tooltip>
                  <el-tooltip content="详情" placement="top">
                    <el-button @click="$goto({ path: '/admin/complaintdetail', query: { id: row.id } })"
                    icon="el-icon-document"
                        type="primary"
                        size="mini"
                        style="background-color: rgb(123 147 190); border-color: rgb(123 147 190);"></el-button>
                  </el-tooltip>
                  <el-tooltip content="删除" placement="top">
                    <el-button  icon="el-icon-remove"
                        type="danger"
                        size="mini" @click="deleteItem(row)" style="background-color: rgb(229 79 110); border-color: rgb(229 79 110);"></el-button>
                  </el-tooltip>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="custom-pagination" style="margin-top: 10px; text-align: center">
          <el-pagination @current-change="loadList" :current-page="page" :page-size="pagesize" @size-change="sizeChange"
            layout="total, sizes, prev, pager, next, jumper" :total="totalCount"></el-pagination>
        </div>
      </div>
      <el-row :gutter="20" style="margin-top: 40px;">
        <el-col :span="12">
          <div ref="barChart" style="height: 400px;"></div>
        </el-col>
        <el-col :span="12">
          <div ref="polarChart" style="height: 400px;"></div>
        </el-col>
      </el-row>
      <div class="chart-legend">
        <span class="legend-item">投诉数量</span>
        <span class="legend-item">附件数量</span>
      </div>
      <div class="custom-pagination" style="margin-top: 10px; text-align: center">
        <el-pagination @current-change="chartPageChange" :current-page="chartPage" :page-size="chartPageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="chartTotal"></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import api from '@/api';
import { remove, checkIssh } from '@/utils/utils';
import { extend } from '@/utils/extend';
import objectDiff from 'objectdiff';
import * as echarts from 'echarts';

/**
 * 后台列表页面
 */
export default {
  data() {
    return {
      loading: false,
      list: [],
      search: {},
      total: {},
      page: 1, // 当前页
      pagesize: 10, // 页大小
      totalCount: 0, // 总行数
      chartData: [],
      chartPage: 1, // 图表当前页
      chartPageSize: 5, // 图表页大小
      chartTotal: 0, // 图表数据总量
    };
  },
  watch: {},
  computed: {},
  methods: {
    searchSubmit() {
      this.loadList(1);
    },
    sizeChange(e) {
      this.pagesize = e;
      this.loadList(1);
    },
    checkIssh,
    loadList(page) {
      if (this.loading) return;
      this.loading = true;
      this.page = page;
      var filter = extend(true, {}, this.search, { page: page + '', pagesize: this.pagesize + '' });
      var diff = objectDiff.diff(filter, this.$route.query);
      if (diff.changed != 'equal') {
        this.$router.push({
          path: this.$route.path,
          query: filter,
        });
      }
      this.$post(api.complaint.list, filter)
        .then((res) => {
          this.loading = false;
          if (res.code == api.code.OK) {
            extend(this, res.data);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err.message);
        });
    },
    deleteItem(row) {
      this.$confirm('确定删除数据？', '提示', {
        type: 'warning',
      })
        .then(() => {
          this.loading = true;
          this.$post(api.complaint.delete, {
            id: row.id,
          })
            .then((res) => {
              this.loading = false;
              if (res.code != api.code.OK) {
                this.$message.error(res.msg);
              } else {
                remove(this.list, row);
              }
            })
            .catch((err) => {
              this.loading = false;
              this.$message.error(err.message);
            });
        })
        .catch(() => { });
    },
    fetchChartData() {
      this.$post(api.complaint.complaints_statistics)
        .then((res) => {
          this.loading = false;
          if (res.code == api.code.OK) {
            this.chartData = res.data.map;
            this.chartTotal = this.chartData.length;
            this.renderBarChart();
            this.renderPolarChart();
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err.message);
        });
    },
    renderBarChart() {
      const start = (this.chartPage - 1) * this.chartPageSize;
      const end = this.chartPage * this.chartPageSize;
      const currentData = this.chartData.slice(start, end);

      const barChart = echarts.init(this.$refs.barChart);
      const option = {
        title: {
          text: '用户投诉统计 - 柱状图',
          left: 'center',
          textStyle: {
            fontSize: 16,
            fontWeight: 'normal',
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        grid: {
          top: 50,
          left: 50,
          right: 50,
          bottom: 50,
          containLabel: true,
          backgroundColor: 'rgba(255, 255, 255, 0.9)',
          borderWidth: 1,
          borderColor: '#f0f0f0',
        },
        yAxis: {
          type: 'category',
          data: currentData.map((item) => `${item.user_id}-${item.user_name}`),
          axisLabel: {
            fontSize: 12,
          },
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            fontSize: 12,
          },
        },
        series: [
          {
            name: '投诉数量',
            type: 'bar',
            data: currentData.map((item) => item.total_complaints),
            itemStyle: {
              // color: '#1890ff',
            },
          },
          {
            name: '附件数量',
            type: 'bar',
            data: currentData.map((item) => item.total_files),
            itemStyle: {
              // color: '#facc14', // Adjust color as needed
            },
          },
        ],
        legend: {
          data: ['投诉数量', '附件数量'],
          top: 30,
        },
        animationDuration: 1000, // Adjust animation speed
      };
      barChart.setOption(option);
    },
    renderPolarChart() {
      const start = (this.chartPage - 1) * this.chartPageSize;
      const end = this.chartPage * this.chartPageSize;
      const currentData = this.chartData.slice(start, end);

      const polarChart = echarts.init(this.$refs.polarChart);
      const option = {
        title: {
          text: '用户投诉统计 - 极坐标图',
          left: 'center',
          top: '0px',
          textStyle: {
            fontSize: 16,
            fontWeight: 'normal',
          },
        },
        polar: {
    radius: ['20%', '60%'],  // 缩小图表半径
    center: ['50%', '50%'] // 调整图表中心位置
  },
        angleAxis: {
          type: 'category',
          data: currentData.map((item) => `${item.user_id}-${item.user_name}`),
          axisLabel: {
            fontSize: 12,
          },
        },
        radiusAxis: {
          axisLabel: {
            fontSize: 12,
          },
        },
        tooltip: {
          trigger: 'item',
        },
        series: [
          {
            name: '投诉数量',
            type: 'bar',
            data: currentData.map((item) => item.total_complaints),
            coordinateSystem: 'polar',
            itemStyle: {
              // color: '#1890ff', // Adjust color as needed
            },
          },
          {
            name: '附件数量',
            type: 'bar',
            data: currentData.map((item) => item.total_files),
            coordinateSystem: 'polar',
            itemStyle: {
              // color: '#facc14', // Adjust color as needed
            },
          },
        ],
        legend: {
    data: ['投诉数量', '附件数量'],
    top: 40,
    textStyle: {
      color: '#34495e',
      fontSize: 12
    },
    icon: 'roundRect',
    itemWidth: 12,
    itemHeight: 12,
    itemGap: 30 // 增加图例项之间的间距
  },
        animationDuration: 1000,
      };
      polarChart.setOption(option);
    },
    chartPageChange(page) {
      this.chartPage = page;
      this.renderBarChart();
      this.renderPolarChart();
    },
  },
  created() {
    this.loadList(1);
    this.fetchChartData();
  },
};
</script>

<style lang="scss">
.complaint-list {
  .custom-box-card {
    .custom-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title {
        font-size: 20px;
      }
    }

    .custom-pagination {
      margin-top: 20px;
    }

    .chart-legend {
      display: flex;
      justify-content: center;
      margin-top: 10px;

      .legend-item {
        margin-right: 20px;
        font-size: 16px;
      }
    }
  }
}
</style>

